<template>
 <main>
    <section class="slider-area"  data-background="img/bg/slider_area_bg.jpg">
            <div class="container custom-container">
                <div class="row">
                    <div class="col-3">
                        <div class="slider-banner-img">
                            <router-link to="shop.html"><img src="img/slider/slider_banner03.jpg" alt=""></router-link>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="slider-banner-img mb-20">
                            <router-link to="shop.html"><img src="img/slider/slider_banner01.jpg" alt=""></router-link>
                        </div>
                        <div class="slider-banner-img">
                            <router-link to="shop.html"><img src="img/slider/slider_banner02.jpg" alt=""></router-link>
                        </div>
                    </div>
                   
                    <div class="col-7">
                            <div class="slider-active">
                                <div class="single-slider slider-bg content-right" data-background="img/slider/slider__bg01.jpg">
                                    <div class="slider-content">
                                        <h5 class="sub-title" data-animation="fadeInUp" data-delay=".2s">top deal !</h5>
                                        <h2 class="title" data-animation="fadeInUp" data-delay=".4s">organic food</h2>
                                        <p data-animation="fadeInUp" data-delay=".6s">Get up to 50% OFF Today Only</p>
                                        <a href="shop.html" class="btn" data-animation="fadeInUp" data-delay=".8s">Shop Now</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
            
        </section>
        <div class="coupon-area gray-bg pb-80">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="coupon-bg">
                            <div class="coupon-title">
                                <span>Use coupon Code</span>
                                <h3 class="title">Get $3 Discount Code</h3>
                            </div>
                            <div class="coupon-code-wrap">
                                <h5 class="code">ganic21abs</h5>
                                <img src="img/images/coupon_code.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <section class="discount-area pt-80">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-4 col-lg-6 col-md-8">
                        <div class="discount-item mb-20">
                            <div class="discount-thumb">
                                <img src="img/product/discount_img01.jpg" alt="">
                            </div>
                            <div class="discount-content">
                                <span>healthy food</span>
                                <h4 class="title"> <router-link to="shop.html">100 organic UP TO 35%</router-link>
                                </h4>
                                <router-link to="shop.html" class="btn">shop now</router-link>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-6 col-md-8">
                        <div class="discount-item mb-20">
                            <div class="discount-thumb">
                                <img src="img/product/discount_img02.jpg" alt="">
                            </div>
                            <div class="discount-content">
                                <span>healthy food</span>
                                <h4 class="title"> <router-link to="shop.html">Hygienically Packed</router-link></h4>
                                <router-link to="shop.html" class="btn">shop now</router-link>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-6 col-md-8">
                        <div class="discount-item style-two mb-20">
                            <div class="discount-thumb">
                                <img src="img/product/discount_img03.jpg" alt="">
                            </div>
                            <div class="discount-content">
                                <span>healthy food</span>
                                <h4 class="title"> <router-link to="shop.html">baby favorite UP TO 15%</router-link>
                                </h4>
                                <router-link to="shop.html" class="btn">shop now</router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="discount-time-area">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="discount-time-bg">
                                <div class="discount-time-img left"><img src="img/images/discount_count_shape01.png" class="wow rollIn" data-wow-delay=".3s" alt=""></div>
                                <div class="discount-time-img right"><img src="img/images/discount_count_shape02.png" alt=""></div>
                                <div class="discount-time-content">
                                    <div class="section-title section-title-two text-center mb-25">
                                        <span class="sub-title">Get a Discount</span>
                                        <h2 class="title">Best Deals of this Week!</h2>
                                    </div>
                                    <div class="coming-time" data-countdown="2021/10/20"></div>
                                    <a href="shop.html" class="btn">Shop Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        <section class="discount-style-two pt-60 pb-50">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="discount-item-two">
                            <div class="discount-thumb">
                                <img src="img/product/s_discount_img01.jpg" alt="">
                            </div>
                            <div class="discount-content">
                                <span>healthy food</span>
                                <h4 class="title"> <router-link to="shop.html">organic farm for ganic</router-link>
                                </h4>
                                <p>Super Offer TO 50% OFF</p>
                                <router-link to="shop.html" class="btn rounded-btn">shop now</router-link>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="discount-item-two">
                            <div class="discount-thumb">
                                <img src="img/product/s_discount_img02.jpg" alt="">
                            </div>
                            <div class="discount-content">
                                <span>healthy food</span>
                                <h4 class="title"> <router-link to="shop.html">BABY FAVORITE UP TO 15%</router-link>
                                </h4>
                                <p>Super Offer TO 50% OFF</p>
                                <router-link to="shop.html" class="btn rounded-btn">shop now</router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="row">
                        <div class="col-3 d-none d-lg-block">
                            <div class="special-products-add">
                                <div class="sp-add-thumb">
                                    <img src="img/product/special_products_add.jpg" alt="">
                                </div>
                                <div class="sp-add-content">
                                    <span class="sub-title">healthy food</span>
                                    <h4 class="title">baby favorite <b>Product</b></h4>
                                    <p>Super Offer TO 50% OFF</p>
                                    <router-link to="shop.html" class="btn rounded-btn">shop now</router-link>
                                </div>
                            </div>
                        </div>
                        <div class="col-3 d-none d-lg-block">
                            <div class="special-products-add">
                                <div class="sp-add-thumb">
                                    <img src="img/product/special_products_add.jpg" alt="">
                                </div>
                                <div class="sp-add-content">
                                    <span class="sub-title">healthy food</span>
                                    <h4 class="title">baby favorite <b>Product</b></h4>
                                    <p>Super Offer TO 50% OFF</p>
                                    <router-link to="shop.html" class="btn rounded-btn">shop now</router-link>
                                </div>
                            </div>
                        </div> 
                         <div class="col-3 d-none d-lg-block">
                            <div class="special-products-add">
                                <div class="sp-add-thumb">
                                    <img src="img/product/special_products_add.jpg" alt="">
                                </div>
                                <div class="sp-add-content">
                                    <span class="sub-title">healthy food</span>
                                    <h4 class="title">baby favorite <b>Product</b></h4>
                                    <p>Super Offer TO 50% OFF</p>
                                    <router-link to="shop.html" class="btn rounded-btn">shop now</router-link>
                                </div>
                            </div>
                        </div>
                         <div class="col-3 d-none d-lg-block">
                            <div class="special-products-add">
                                <div class="sp-add-thumb">
                                    <img src="img/product/special_products_add.jpg" alt="">
                                </div>
                                <div class="sp-add-content">
                                    <span class="sub-title">healthy food</span>
                                    <h4 class="title">baby favorite <b>Product</b></h4>
                                    <p>Super Offer TO 50% OFF</p>
                                    <router-link to="shop.html" class="btn rounded-btn">shop now</router-link>
                                </div>
                            </div>
                        </div> 
                    </div>
                        
 </main>
</template>
 
<script>
 
import { mapGetters,mapActions,mapMutations,mapState } from 'vuex';
 
export default {
    components:{
 
              },
    data() {
          return {
               
                 }
         },
    computed:{

             },
    created() {
         
              },
    mounted() {
      
              },
    watch:{

          },

    beforeCreate(){

                  },
    beforeDestroy() {

                    },
    deactivated() {

                   },
}
</script>
<style>
.single-slider.slider-bg {
    background-image: url('@/../public/img/slider/slider__bg01.jpg');
}
</style>